<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="item.path" v-for="(item, index) in list" :key="index">{{ item.title }}</el-breadcrumb-item>
    </el-breadcrumb>
</template>
<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();

const list = computed({
    get: () => {
        const breadcrumbs = route.matched.map((x) => {
            return {
                path: x.path,
                title: x.meta.title,
            };
        });
        return breadcrumbs;
    },
});
</script>
<style lang="less" scoped>
.el-breadcrumb {
    width: 1200px;
    margin: 0 auto;
    line-height: 46px;
}
:deep(.el-breadcrumb__item span) {
    color: #818181;
    font-size: 14px;
    font-weight: 400;
}

:deep(.el-breadcrumb__item:last-child) {
    .el-breadcrumb__inner {
        color: #3a85f5 !important;
    }
}
</style>